<!DOCTYPE html>
<html>
<head>
	<title>JQuery_cn</title>
	<link rel="stylesheet" type="text/css" href="JQuery.css">
	<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
	<script src="JQuery.js"></script>
</head>
<body>
	<header>
		<div id="title">
			玩转JQuery
		</div>
		<nav>
			<ul>
				<li><a class="main-menu" href="#">Basic JS</a></li>
				<li><a class="main-menu" href="#">Hangman</a></li>
				<li><a class="main-menu" href="#">JQuery</a></li>
				<li><a class="main-menu" href="#">Advanced JS</a></li>
			</ul>
		</nav>
	</header>
	<div id="content">
			<div class="lab">
				<div class="out">
					<p>鼠标移向这里</p>
					<p>0</p>
				</div>
				<button id="max_screen">展开全部画面</button>
			</div>
		</div>
		<div class = "lab">
			<button id = "theone">什么也没发生。。。</button>
			<button id = "bind">加个点击试试</button>
			<button id = "unbind">重来</button>
			<div id = "off_test" style="display: none;">啊哈我来也</div>
		</div>
		<div class="lab">
			<div id="trigger_test">
				<button>按钮 #1</button>
				<button>按钮 #2</button>
				<div><span>0</span> 是按钮 #1 点击次数.</div>
				<div><span>0</span> 是按钮 #2 点击次数.(2 use the trigger function)</div>
			</div>
		</div>
		<div class="lab">
			<h3>图片变换，点击图片即可 </h3>
			<div id="imageArea">
				<img id="image" src="mm1.jfif" width="240">
			</div>
			<p>ps:样板，如有冒犯请联系作者删除</p>
		</div>
		<div class="lab">
			<h3>照片专辑，点击图片即可</h3>
			<div>
				<img id="imgAlbum" height="350">
			</div>
			<p>ps:样板，如有冒犯请联系作者删除</p>
		</div>
		<div class="lab" id="schedule">
			<div id="schedule_header">
				<h2>时间表笔记</h2>
				<div id="add_img"><img src="plus_img.jpg" width="30"></div>
			</div>
			<div id="note_form">
				<table>
					<tr>
						<td>主题:</td><td><input id="note_title" type="text"></td>
					</tr>
					<tr>
						<td>日期:</td><td><input id="note_date" type="date"></td>
					</tr>
					<tr>
						<td>内容:</td><td><textarea id="note_content" rows=20 cols=50></textarea></td>
					</tr>
					<tr>
						<td colspan="2" align="center"><button id="add_node">确认</button></td>
					</tr>
				</table>
			</div>
			<div id="note"></div>
		</div>
		<div class="lab">
			<div id="animation_test">
				<button id="moving_button">点击移动箱子</button>
				<div id="moving_box"></div>
			</div>
		</div>
		<div class="lab">
			<dl class="accordion">
				<dt>item 1</dt>
				<dd>some explanation here. some explanation here.</dd>
				<dt>item 2</dt>
				<dd>some explanation here. some explanation here.</dd>
				<dt>item 3</dt>
				<dd>some explanation here. some explanation here.</dd>
			</dl>
			<dl class="accordion">
				<dt>item 1</dt>
				<dd>some explanation here. some explanation here.</dd>
				<dt>item 2</dt>
				<dd>some explanation here. some explanation here.</dd>
				<dt>item 3</dt>
				<dd>some explanation here. some explanation here.</dd>
			</dl>
		</div>
		<div class="lab">
			<h1>幻灯片秀</h1>
			<p>鼠标放在图上图不变，松开变</p>
			<div class="slideshow">
				<img src="photo1-1.jpg" alt="" />
				<img src="photo1-2.jpg" alt="" / class="alt" />
				<img src="photo1-3.jpg" alt="" / class="alt" />
				<img src="photo1-4.jpg" alt="" / class="alt" />
				<img src="photo1-5.jpg" alt="" / class="alt" />
			</div>
			<div class="slideshow">
				<img src="photo2-1.jpg" alt="" />
				<img src="photo2-2.jpg" alt="" / class="alt" />
				<img src="photo2-3.jpg" alt="" / class="alt" />
				<img src="photo2-4.jpg" alt="" / class="alt" />
				<img src="photo2-5.jpg" alt="" / class="alt" />
			</div>
			<div class="slideshow">
				<img src="photo3-1.jpg" alt="" />
				<img src="photo3-2.jpg" alt="" / class="alt" />
				<img src="photo3-3.jpg" alt="" / class="alt" />
				<img src="photo3-4.jpg" alt="" / class="alt" />
				<img src="photo3-5.jpg" alt="" / class="alt" />
			</div>
			<div class="lab">
				<div id="target"></div>
				<button type="button" id="ajaxbutton">get data</button>
			</div>
		</div>	

	<footer>
		<p>Web Programming, 2025</p>
		<p>created by 北极星.天赐</p>
	</footer>
</body>
</html>